<template>

  <div>
    <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>学员列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card class="box-card">
      <el-form :model="searchForm" class="demo-form-inline" >
        <el-row :gutter="20">
          <el-form-item>
            <el-col :span="4">
              <el-input placeholder="姓名" v-model="searchForm.showName"></el-input>
            </el-col>
<!--            <el-col :span="11">-->
<!--              <el-date-picker placeholder="入职日期(开始)" type="date" v-model="searchForm.startDate"></el-date-picker>-->
<!--              - -->
<!--              <el-date-picker placeholder="入职日期(结束)" type="date" v-model="searchForm.endDate"></el-date-picker>-->
<!--            </el-col>-->
            <el-button @click="searchUser" plain type="info">搜索</el-button>
            <el-button @click="userFormVisible=true" type="primary">添加学员</el-button>
          </el-form-item>
        </el-row>
      </el-form>

      <el-table
        :data="userList"
        stripe
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          label="头像" width="120">
          <template slot-scope="scope">
            <img  v-if="scope.row.picImg!=null" :src="'/api/education-user/student/download/'+scope.row.picImg" width="50px" height="50px">
          </template>
        </el-table-column>
        <el-table-column
          label="用户名"
          prop="loginName"
          width="120">
        </el-table-column>
        <el-table-column
          label="姓名"
          prop="showName"
          width="120">
        </el-table-column>
        <el-table-column
          label="年龄"
          prop="age"
          width="120">
        </el-table-column>
        <el-table-column
          label="性别" width="120">
          <template slot-scope="scope">
            {{scope.row.sex | sexFit}}
          </template>
        </el-table-column>
        <el-table-column
          label="手机号"
          prop="mobile" width="180">
        </el-table-column>
        <el-table-column
          label="邮箱"
          prop="email" width="160">
        </el-table-column>
        <el-table-column
          label="注册日期"
          prop="createTime" width="120">
          <template slot-scope="scope">
            {{scope.row.createTime | dateFit('YYYY/MM/DD')}}
          </template>
        </el-table-column>
        <el-table-column
          label="是否启用">
          <template slot-scope="scope">
            <span style="display:none;">  {{scope.row.state=(scope.row.isAvalible==1)}}</span>
            <el-switch
              @change="updateIsEnable(scope.row,scope.row.isAvalible)" v-model="scope.row.state">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button @click="getUser(scope.row.id)" size="small" type="text" v-if="scope.row.status==0">编辑
            </el-button>
            <el-button @click="delUser(scope.row.id)" size="small" type="text" v-if="scope.row.status==1">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page.pagenum"
        :page-size="page.pagesize"
        :page-sizes="[5, 10, 20, 40]"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>

      <el-dialog :append-to-body=true :close-on-click-modal="false" :title="userForm.id==null?'添加用户':'编辑用户'" :visible.sync="userFormVisible"
                 @closed="crearUserForm"> <!--用户表单框 -->
        <el-form :rules="rules"  ref="userForm" :model="userForm" label-width="70px" >
          <el-row :gutter="22">
            <el-col :span="11">
              <el-form-item label="头像">
                <el-upload
                  class="avatar-uploader"
                  action="/api/education-user/student/upload"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="userForm.picImg!=null" :src="'/api/education-user/student/download/'+userForm.picImg" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="22">
            <el-col :span="11">
              <el-form-item label="用户名" prop="loginName">
                <el-input v-model="userForm.loginName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="密码" prop="loginPwd">
                <el-input v-model="userForm.loginPwd"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="22">
            <el-col :span="11">
              <el-form-item label="姓名" prop="showName">
                <el-input v-model="userForm.showName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="性别" prop="sex">
                <el-radio :label="0" v-model="userForm.sex">男</el-radio>
                <el-radio :label="1" v-model="userForm.sex">女</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="22">
            <el-col :span="11">
              <el-form-item label="手机号" prop="mobile">
                <el-input v-model="userForm.mobile"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="userForm.email"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="22">
            <el-col :span="11">
              <el-form-item label="年龄" prop="age">
                <el-input v-model="userForm.age"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div class="dialog-footer" slot="footer">
          <el-button @click="userFormVisible = false">取 消</el-button>
          <el-button @click="saveUser()" type="primary">确 定</el-button>
        </div>
      </el-dialog>

    </el-card>

  </div>
</template>

<script>
    export default {
      name: "StudentList",
      data() {
        return {
          userFormVisible: false,
          userForm: {picImg:''},
          searchForm: {showName:""},
          userList: [],
          page: {
            pagenum: 0,
            pagesize: 5
          },
          total: 0,
          userRoleVisible:false,
          userId:null,
          userFullName:'',
          roleIds:[],
          roleList:[],
          auth:{token:null},
          rules:{
            loginName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
            loginPwd: [{ required: true, message: '请输入登录密码', trigger: 'blur' }],
            showName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
            sex: [{ required: true, message: '请输入性别', trigger: 'blur'}],
            mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
            email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
            age: [{ required: true, message: '请输入年龄', trigger: 'blur' }]
          },
        }
      },
      methods: {
        handleAvatarSuccess(res, file) {//上传完成后回调
          this.userForm.picImg = res.result.path;
        },
        beforeAvatarUpload(file) {//=,=== 和 == 比较的是内容
          const isJPG = file.type === 'image/jpeg'|| file.type === 'image/png';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        },
        updateIsEnable: function (row, id) {//状态修改
          if (row.state) {
            row.isAvalible = 1;
          } else {
            row.isAvalible = 0;
          }
          this.$http.get("education-user/student/updateisAvalible/"+row.id+"/"+row.isAvalible).then((res) => {
            if (res.data.success) {
              this.$message.success(res.data.message);
            }else{
              this.$message.error(res.data.message);
            }
          });
          this.searchUser()
        },
        getUser: function (id) {//查询当前id的用户
          this.$http.get("education-user/student/findStudent/" + id).then((res) => {
            if (res.data.success) {
              this.userForm = res.data.result //赋值
              this.userFormVisible = true //显示dialog框
            } else {
              this.$message.error(res.data.message);
            }
            this.searchUser();
          });
        },
        searchUser: function () {//用户列表
          this.$http.post("education-user/student/list/" + this.page.pagenum + "/" + this.page.pagesize, this.searchForm).then((res) => {
            this.userList = res.data.result.list;
            this.total = res.data.result.total;
          });
        },
        handleSizeChange: function (val) {
          this.page.pagesize = val;
          this.searchUser();
        },
        handleCurrentChange: function (val) {
          this.page.pagenum = val;
          this.searchUser();
        },
        crearUserForm: function () {
          //清空数据
          this.userForm = {}
        },
        saveUser: function () { //用户保存
          this.$refs['userForm'].validate((valid) => {
            if (!valid) {
              return
            }

          if(this.userForm.id==''){
            this.$http.post("education-user/student/addStudent", this.userForm).then((res) => {
              //如何提示
              if (res.data.success) {
                this.$message({
                  message: res.data.message,
                  type: 'success'
                });
              } else {
                this.$message.error(res.data.message);
              }
              //关闭dialog框
              this.userFormVisible = false
              //重新加载列表
              this.searchUser()
            });
          }else{
            this.$http.post("education-user/student/updateStudent", this.userForm).then((res) => {
              //如何提示
              if (res.data.success) {
                this.$message({
                  message: res.data.message,
                  type: 'success'
                });
              } else {
                this.$message.error(res.data.message);
              }
              //关闭dialog框
              this.userFormVisible = false
              //重新加载列表
              this.searchUser()
            });
          }
          })
        },
        delUser:function (id) {
          this.$http.get("education-user/student/delStudnet/"+id).then((res)=>{
            if (res.data.success) {
              this.$message({
                message: res.data.message,
                type: 'success'
              });
            } else {
              this.$message.error(res.data.message);
            }
          })
        }
      },
      filters: {
        sexFit: function (v1) {
          if (v1 == '0') return '男'
          if (v1 == '1') return '女'
        }
      },
      mounted() {
        this.searchUser();

      }

    }
</script>

<style scoped>

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
